import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Button } from 'antd';

const { TextArea } = Input;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

function QueryRule({ visiable, close, status, form }) {
  const { getFieldDecorator } = form;
  return (
    <Modal
      title={status === 'add' ? '新增规则' : status === 'detail' ? '查看规则' : '修改规则'}
      width="500px"
      destroyOnClose
      footer={
        status === 'detail' ? null : (
          <Button type="primary" onClick={close}>
            保存
          </Button>
        )
      }
      onCancel={close}
      visible={visiable}
    >
      <Form>
        <Form.Item label="规则名称" {...formItemLayout}>
          {getFieldDecorator('externalUserId', {
            rules: [
              {
                required: true,
                message: '规则名称不能为空',
              },
            ],
          })(<Input disabled={status === 'detail' ? true : false} placeholder="请输入" />)}
        </Form.Item>
        <Form.Item label="业务名称" {...formItemLayout}>
          {getFieldDecorator('exterUserId')(
            <Input disabled={status === 'detail' ? true : false} placeholder="请输入" />
          )}
        </Form.Item>
        <Form.Item label="规则描述" {...formItemLayout}>
          {getFieldDecorator('externalUserCode')(
            <TextArea
              disabled={status === 'detail' ? true : false}
              rows={3}
              placeholder="请输入规则描述内容"
            />
          )}
        </Form.Item>
      </Form>
    </Modal>
  );
}

export default Form.create()(QueryRule);
